<template>
  <div id="app">
    <h1 style="text-align: center;">这是头像组件的测试容器</h1>
    <div class="avatar">
      <Avatar :title="chikato" :size="300"
        url="https://animecorner.me/wp-content/uploads/2022/07/Lycoris-Recoil-Premiere.png" />
      <Avatar :title="chikato" :size="400"
        url="https://otakukart.com/wp-content/uploads/2024/01/Lycoris-Recoil-Credits-A-1-Pictures-1-1536x768.jpg" />
      <Avatar :title="chikato" :size="300"
        url="https://animecorner.me/wp-content/uploads/2022/09/lycoris-smoking.png" />
    </div>
  </div>
</template>

<script>
import Avatar from './index.vue'
export default {
  name: 'App',
  components: {
    Avatar
  },
  data() {
    return {
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
.avatar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar-container {
  margin: 0 auto;
  border: 2px solid #2c3e50;
}
</style>
